<template>
	<view class="loading" v-if='loadingning'>

		<view class="hevu-loading-body">
			<view>
				<view class="loafding">
					<LoadingBack12 :bacgColor='loadingIconColor' :size="size" />
				</view>
			</view>
		</view>
		<!-- <view class="right-text">
			<text>加载中...</text>
		</view> -->

	</view>

</template>

<script>
	/*
		@property  {Boolean} loadingning      加载状态     true，
		
		@property  {Number} opacity          背景透明度     1
		@property  {String} backgroundColor  背景颜色       #fff
	
		@property  {String} loadingText      加载文字提示   加载中....
		@property  {String} textColor        加载文字颜色   #3375f6
		@property  {Number} textSize         加载文字大小   30
		@property  {Boolean} textFlicker     加载文字闪动   true
		
		@property  {String} loadingIconColor 加载图颜色     #3375f6
		@property  {String} type             加载图类型     loading1
		@property  {Number} size             加载图大小     120
		
	*/
	import LoadingBack12 from './loadingBack/loading12.vue';

	export default {
		name: 'HevuLoading',
		props: {
			loadingning: {
				type: Boolean,
				default: true,
			},

			loadingText: {
				type: String,
				default: '加载中....'
			},
			size: {
				type: Number,
				default: 50,
			},
			loadingIconColor: {
				type: String,
				default: '#333'
			},
		},
		data() {
			return {
				soltDom: false,
			}
		},
		components: {
			LoadingBack12
		},
		mounted() {
			//this.soltDom = this.$slots?.default?.length;

		}
	}
</script>

<style lang="scss" scoped>
	.hevu-loading-body {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;

		.loafding {
			// padding: 20rpx;
		}

		.loafdingText {
			font-size: 30rpx;
			// line-height: 60rpx;
			text-align: center;

			.textFlicker {
				.letter {
					animation-name: loadingF;
					animation-duration: 1.6s;
					animation-iteration-count: infinite;
					animation-direction: linear;
				}
			}
		}
	}
	
	@keyframes loadingF {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	.right-text {
		width: 100%;
		text-align: center;
		text {
			font-size: 22rpx;
			//color: #26C55E;
		}
	}
</style>